<template>
  <div>
    <div>
      <button @click="componentsName='One'">One</button>
      <button @click="componentsName='Two'">two</button>
      <button @click="componentsName='Three'">three</button>
    </div>

    
      <component :is='componentsName'></component>
     
  </div>
</template>
<script>
// import One from '@/components/One'
// import Two from '@/components/Two'
// import Three from '@/components/Three'

// 在大型引用中可能要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块
// vue允许你以一个工厂函数的方式定义你的组件
const One = ()=>{return import("@/components/One.vue")}
const Two = ()=>{return import("@/components/Two.vue")}
const Three = ()=>{return import("@/components/Three.vue")}
export default {
  name:"App",
  components:{
    One,
    Two,
    Three,
  },
  data(){
    return {
      componentsName:"One",
    }
  }
};
</script>